<!-- 模块公共标题 -->
<template>
  <div class="template2-model-title">
    <div class="icon-box">
      <SvgIcon
        name="icon-education-1-copy"
        width="15px"
        hight="15px"
        class="icon"
      ></SvgIcon>
    </div>
    <div class="right-title">
      <h1>{{ title }}</h1>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { IMODELSTYLE } from '@/interface/modelStyle'
import SvgIcon from '@/components/SvgIcon/index.vue'

defineProps<{
  title: string
  modelStyle: IMODELSTYLE // 模块样式
}>()
</script>
<style lang="scss" scoped>
.template2-model-title {
  width: 100%;
  display: flex;
  align-items: center;

  .icon-box {
    width: 26px;
    height: 26px;
    background-color: v-bind('modelStyle.themeColor');
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;

    .icon {
      font-size: 14px;
    }
  }

  .right-title {
    width: 100%;
    border-bottom: 1px solid v-bind('modelStyle.themeColor');
    height: 38px;
    display: flex;

    h1 {
      font-size: v-bind('modelStyle.firstTitleFontSize');
      color: v-bind('modelStyle.themeColor');
    }
  }
}
</style>
